<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../dist/js/city-picker.data.js"></script>
<script type="text/javascript" src="../dist/js/city-picker.js"></script>
<link rel="stylesheet" href="../dist/css/city-picker.css">

<script type="text/javascript">
	$(function() {
		$("#area").citypicker();
		$("#reset").click(function() {
			$("#area").citypicker('reset');
		})

		$("#setVal").click(function() {
			//赋值前必须先执行reset、destroy
			$("#area").citypicker('reset');
			$("#area").citypicker('destroy');
			$("#area").citypicker({
				province : '山东省',
				city : '济南市',
				district : '历城区'
			});
		})
	})
</script>
</head>
<body>
	<div style="position: relative;">
		<input name="area" id="area" type="text" size="80" /> <input
			type="button" value="重置 " id="reset"> <input type="button"
			value="赋值 " id="setVal">
	</div>

</body>
</html>